<template>
  <!-- 规则定义子页面 分摊动因动因信息-->

  <div>
    <el-form
      :model="saveForm"
      ref="saveForm"
      label-position="left"
      :rules="saveFormRules"
      label-width="110px"
    >
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            操作目标
          </h3>
        </el-col>
        <el-col :span="9">
          <el-form-item
            label="动因数据表:"
            prop="pubPhysicaltableId"
          >
            <el-select
              v-model="saveForm.pubPhysicaltableId"
              placeholder="请选择动因数据表"
              style="width: 100%"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="9">
          <el-form-item
            label="动因数值字段:"
            prop="pColumnId"
           
          >
            <el-select
              v-model="saveForm.pColumnId"
              placeholder="请选择动因数值字段"
              style="width: 100%"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="动因类别:" prop="feeType">
            <el-select
              v-model="saveForm.feeType"
              placeholder="请选择动因类别"
              style="width: 100%"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="3" style="margin-top:7px;">
          <el-radio v-model="saveForm.ratio" label="1"
            ><span style="font-size: 12px">求占比</span></el-radio
          >
        </el-col>
        <el-col :span="3" style="margin-top:7px;">
          <el-radio v-model="saveForm.ratio" label="2"
            ><span style="font-size: 12px">简单比例</span></el-radio
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            筛选条件
          </h3>
        </el-col>
      </el-row>
      <el-row style="font-size: 13px; margin-bottom: 10px">
        <el-col :span="7">
          <p>维度</p>
        </el-col>
        <el-col :span="11">
          <p>值</p>
        </el-col>
        <el-col :span="6">
          <p>描述</p>
        </el-col>
      </el-row>
       <div style="height: 150px;
          overflow: auto;
          overflow-x: hidden;
          margin-bottom: 20px;">
      <el-row
        v-for="(item, index) in selectConditionList"
        :key="index"
        style="margin-top: 10px"
      >
        <el-col :span="7">
          <span style="line-height: 25px">{{ item.columnCn }}</span>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="selectConditionList[index][item.columnEn]"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button
            style="min-width: 60px; min-height: 26px"
            @click="toSelectTab(item)"
            >查看</el-button
          >
        </el-col>
        <el-col :span="6">
          <span style="line-height: 25px">{{ item.descn }}</span>
        </el-col>
      </el-row>
      </div>
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            过滤器
          </h3>
        </el-col>
        <el-col :span="5"> 过滤器类型: </el-col>
        <el-col :span="5">
          <el-radio v-model="saveForm.filterMethods" label="1"
            ><span style="font-size: 12px">使用</span></el-radio
          >
        </el-col>
        <el-col :span="5">
          <el-radio v-model="saveForm.filterMethods" label="2"
            ><span style="font-size: 12px">不使用</span></el-radio
          >
        </el-col>
      </el-row>
      <!--使用过滤器显示-->
      <div v-if="saveForm.filterMethods == '1'">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="过滤器:"
              prop="filterMethods"
              label-width="90px"
            >
              <el-select
                v-model="saveForm.pColumnId"
                placeholder="请选择过滤器"
                style="width: 100%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              style="min-width: 60px; min-height: 26px; margin-top: 3px"
              @click="openFilterPage()"
              >查看</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- 所有成员、关系树展示-->
    <memberAndTree :toShowMemberTree="toShowMemberTree"></memberAndTree>
    <filterPage :toShowFilterPage="toShowFilterPage"></filterPage>
  </div>
</template>
<script>
import { publicManage } from "@/api/index";
// 所有成员、关系树
import memberAndTree from "@/components/ca/memberAndTree";
import filterPage from "@/components/ca/filterPage.vue";

export default {
  components: {
    memberAndTree,
    filterPage,
  },
  data() {
    return {
      toShowFilterPage: false,
      toShowMemberTree: false,
      selectConditionList: [
        {
          creator: "sys",
          createdTm: 1591003689616,
          modifier: null,
          modifiedTm: null,
          columnCode: "40288dfd726e406001726f35b291012f",
          elementName: null,
          tablenameen: "CA_REASON_INF_DRIVE",
          tableId: "40288dfd726e406001726f35b23f012c",
          columnEn: "Org_Cd",
          columnCn: "机构代码",
          dataType: "VARCHAR2",
          length: "20",
          relatedDimensionCode: {
            creator: "sysadmin",
            createdTm: 1542790039000,
            modifier: "sysadmin",
            modifiedTm: 1545101772000,
            dictCode: "OrganUnit",
            dictName: "机构",
            descn: "用来标识分支机构",
            sourceType: "V",
          },
          relatedDimensionCode1: null,
          dimensionType: null,
          isRelatedDimension: "1",
          isShow: "1",
          isTemplate: "0",
          moduleCode: "ca",
          status: "1",
          columnType: "1",
          descn: null,
        },
        {
          creator: "sys",
          createdTm: 1591003689626,
          modifier: null,
          modifiedTm: null,
          columnCode: "40288dfd726e406001726f35b29a0130",
          elementName: null,
          tablenameen: "CA_REASON_INF_DRIVE",
          tableId: "40288dfd726e406001726f35b23f012c",
          columnEn: "Biz_Line_Cd",
          columnCn: "业务条线代码",
          dataType: "VARCHAR2",
          length: "10",
          relatedDimensionCode: {
            creator: "sysadmin",
            createdTm: 1551835274207,
            modifier: "sysadmin",
            modifiedTm: 1571109094945,
            dictCode: "00003",
            dictName: "条线",
            descn: "条线 business_line",
            sourceType: "V",
          },
          relatedDimensionCode1: null,
          dimensionType: null,
          isRelatedDimension: null,
          isShow: "1",
          isTemplate: "0",
          moduleCode: "ca",
          status: "1",
          columnType: "1",
          descn: "业务条线代码",
        },
        {
          creator: "sys",
          createdTm: 1591003689631,
          modifier: null,
          modifiedTm: null,
          columnCode: "40288dfd726e406001726f35b2a00131",
          elementName: null,
          tablenameen: "CA_REASON_INF_DRIVE",
          tableId: "40288dfd726e406001726f35b23f012c",
          columnEn: "Sbjt_Cd",
          columnCn: "科目代码",
          dataType: "VARCHAR2",
          length: "10",
          relatedDimensionCode: {
            creator: "sysadmin",
            createdTm: 1551835274207,
            modifier: "sysadmin",
            modifiedTm: 1551835274207,
            dictCode: "00004",
            dictName: "费用科目",
            descn: "费用科目 gl_account_id",
            sourceType: "V",
          },
          relatedDimensionCode1: null,
          dimensionType: null,
          isRelatedDimension: null,
          isShow: "1",
          isTemplate: "0",
          moduleCode: "ca",
          status: "1",
          columnType: "1",
          descn: "科目代码",
        },
        {
          creator: "sys",
          createdTm: 1591003689636,
          modifier: null,
          modifiedTm: null,
          columnCode: "40288dfd726e406001726f35b2a40132",
          elementName: null,
          tablenameen: "CA_REASON_INF_DRIVE",
          tableId: "40288dfd726e406001726f35b23f012c",
          columnEn: "Prd_Cd",
          columnCn: "匹配字段",
          dataType: "VARCHAR2",
          length: "20",
          relatedDimensionCode: {
            creator: "sysadmin",
            createdTm: 1561038856576,
            modifier: null,
            modifiedTm: null,
            dictCode: "match_id",
            dictName: "匹配字段",
            descn: null,
            sourceType: "U",
          },
          relatedDimensionCode1: null,
          dimensionType: null,
          isRelatedDimension: "1",
          isShow: "1",
          isTemplate: "0",
          moduleCode: "ca",
          status: "1",
          columnType: "1",
          descn: null,
        },
      ],
      saveForm: {
        pubPhysicaltableId: "",
        pColumnId: "",
        feeType: "",
        filterMethods: "2",
      },
      saveFormRules: {
        pubPhysicaltableId: [
          { required: true, message: "请选择业务表", trigger: "blur" },
        ],
        pColumnId: [
          { required: true, message: "请选择业务字段", trigger: "blur" },
        ],
        feeType: [
          { required: true, message: "请选择费用类型", trigger: "blur" },
        ],
        filterMethods: [
          { required: true, message: "请选择过滤类型", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    toSelectTab(item) {
      this.toShowMemberTree = true;
    },
    openFilterPage() {
      this.toShowFilterPage = true;
    },
    initShow() {},
  },
};
</script>
<style lang="scss" scoped></style>